<template page>
  <l-m src="/packages/pui/select/select.html"></l-m>
  <l-m src="/packages/pui/button/button.html"></l-m>
  <l-m src="/packages/pui/dialog/dialog.html"></l-m>
  <l-m src="/packages/comps/local-icon/local-icon.html"></l-m>
  <l-m src="/packages/libs/ofa/body-ghost.min.js"></l-m>
  <style>
    :host {
      display: block;
      height: 100%;
    }

    h2,
    p {
      margin: 0;
      padding: 8px 0;
    }
    p {
      padding: 0px 0;
    }
    .container {
      height: 80%;
      padding: 0 40px;
      justify-content: center;
      align-items: center;
      display: flex;
      flex-direction: column;
      text-align: center;
      text-wrap: balance;
    }

    .os-version {
      font-size: 14px;
      font-weight: 400;
      color: var(--md-sys-color-primary);
    }
  </style>
  <div class="container">
    <o-if :value="isupdate">
      <h2>
        <n-desc space="installer" name="p2.updateTitle"></n-desc>
      </h2>

      <p>
        <n-desc
          space="installer"
          name="p2.updateTo"
          attr:data-local-version="localVersion"
          attr:data-online-version="onlineVersion"
          set-type="html"
        ></n-desc>
      </p>
    </o-if>
    <o-else>
      <h2>
        <n-desc space="installer" name="p2.title"></n-desc>
        <span class="os-version">{{onlineVersion}}</span>
      </h2>
      <p><n-desc space="installer" name="p2.desc1"></n-desc></p>
      <p><n-desc space="installer" name="p2.desc2"></n-desc></p>
      <p><n-desc space="installer" name="p2.desc3"></n-desc></p>
    </o-else>

    <p-select sync:value="settingData.lang" style="margin-top: 16px">
      <n-local-icon
        name="lang"
        slot="prefix"
        style="display: inline-block; margin-right: 8px"
      ></n-local-icon>
      <p-option value="en">English</p-option>
      <p-option value="cn">中文</p-option>
      <p-option value="ja">日本語</p-option>
    </p-select>

    <o-if :value="localVersion === onlineVersion">
      <p-button
        on:click="nextStep"
        variant="outlined"
        attr:disabled="!!unuseInSafari"
        style="margin-top: 24px; width: 200px"
      >
        <n-desc space="installer" name="reinstall"></n-desc>
      </p-button>
    </o-if>
    <o-else>
      <p-button
        attr:disabled="!!unuseInSafari"
        on:click="nextStep"
        style="margin-top: 24px; width: 200px"
      >
        <n-desc space="installer" name="nextStep"></n-desc>
      </p-button>
    </o-else>

    <o-if :value="localVersion === onlineVersion">
      <p-button style="margin-top: 16px; width: 200px">
        <a href="/">
          <n-desc space="installer" name="entrySystemDirectly"></n-desc>
        </a>
      </p-button>
    </o-if>

    <o-if :value="!unuseInSafari">
      <p style="font-size: 12px; margin-top: 26px">
        <n-desc name="tryToRecovery" space="installer"></n-desc>
        <p-button size="mini" variant="text">
          <a href="/recovery/">
            <n-desc name="gotoRecovery" space="installer"></n-desc>
          </a>
        </p-button>
      </p>
    </o-if>

    <o-if :value="unuseInSafari">
      <div
        style="
          color: var(--md-sys-color-primary);
          font-size: 14px;
          padding-top: 8px;
        "
      >
        <n-desc
          name="safariVersionEarlier"
          space="installer"
          attr:data-safari-version="safariVersion"
        ></n-desc>
      </div>
      <p-button
        variant="text"
        size="small"
        on:click="safariDialog = true"
        style="margin-top: 4px"
      >
        <n-desc name="whyUnuseInOldSafari" space="installer"></n-desc>
      </p-button>
    </o-if>
  </div>

  <body-ghost>
    <p-dialog :open="safariDialog" on:click-mask="safariDialog = false">
      <div slot="title">
        <n-desc name="whyUnuseInOldSafari" space="installer"></n-desc>
      </div>
      <div style="max-width: 90vw">
        <ul style="text-align: left; margin: 0; padding-left: 20px">
          <li>
            <n-desc
              name="welcome_page.safari_opfs_issue"
              space="installer"
            ></n-desc>
          </li>
          <li>
            <n-desc
              name="welcome_page.file_read_crash"
              space="installer"
            ></n-desc>
          </li>
          <li>
            <n-desc
              name="welcome_page.async_module_issue"
              space="installer"
            ></n-desc>
          </li>
        </ul>
      </div>
    </p-dialog>
  </body-ghost>

  <script>
    export default async ({ load }) => {
      const { get, init } = await load("/packages/fs/main.js");
      const { getSetting } = await load("/packages/none-os/setting.js");
      const settingData = await getSetting();
      const { getText, setSpace } = await load("/packages/i18n/data.js");

      setSpace("installer", "/install/lang");

      return {
        data: {
          isupdate: false, // 是否是更新
          onlineVersion: "",
          localVersion: "",
          settingData: {},
          safariVersion: "",
          unuseInSafari: false, // 是否在当前 safari 浏览器下使用
          safariDialog: false, // 是否显示 safari 浏览器提示框
        },
        proto: {
          nextStep() {
            $("n-installer").step++;
          },
        },
        async attached() {
          this.settingData = settingData;

          const data = await load("/package.json");
          this.onlineVersion = data.version;

          sessionStorage.onlineVersion = data.version;

          await init("packages");

          // 读取本地的文件
          const localPkg = await get("packages/hashes.json");

          // 如果当前是 safari 浏览器，获取浏览器版本号
          if (
            navigator.userAgent.indexOf("Safari") !== -1 &&
            !navigator.userAgent.includes("Chrome")
          ) {
            const safariVersion =
              navigator.userAgent.match(/([\d.]+) Safari\//)[1];

            this.safariVersion = safariVersion;

            let versionNum = 0;

            safariVersion.split(".").forEach((item, index) => {
              if (index === 0) {
                versionNum += parseInt(item) * 1000000;
              } else if (index === 1) {
                versionNum += parseInt(item) * 1000;
              } else if (index === 2) {
                versionNum += parseInt(item) * 1;
              }
            });

            // 如果 safari 版本号小于 18.5.0，禁用按钮
            if (versionNum < 18005000) {
              this.unuseInSafari = true;
            }

            console.log("safariVersion: ", safariVersion, versionNum);
          }

          if (localPkg) {
            let result = await localPkg.text();
            result = JSON.parse(result);

            this.isupdate = true;
            this.localVersion = result.data.version;
          }
        },
        detached() {
          this.settingData = {};
        },
      };
    };
  </script>
</template>
